<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 组件</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap 101 Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
        <style type="text/css" media="screen">
            body {
                font-family: "Microsoft Yahei", Console, "Helvetica Neue", Helvetica, Arial, sans-serif;
                padding-top: 60px;
            }
        </style>
    </head>

    <body>
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="container">
            <div class="btn-group">
                <buton class="btn btn-default" type="button" aria-label="Left Align">
                    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                </buton>
                <buton class="btn btn-default" type="button" aria-label="Center Align">
                    <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                </buton>
                <buton class="btn btn-default" type="button" aria-label="Justify Align">
                    <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
                </buton>
                <buton class="btn btn-default" type="button" aria-label="Right Align">
                    <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                </buton>
            </div>
            <div class="clearfix" />
            <div class="alert alert-info" role="alert">
                <span class="glyphicon 	glyphicon-exclamation-sign" aria-hidde="true"></span> 请输入一个正确的Email地址
            </div>
            <div class="alert alert-success" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidde="true"></span> 请输入一个正确的Email地址
            </div>
            <div class="alert alert-warning" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidde="true"></span> 请输入一个正确的Email地址
            </div>
            <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidde="true"></span> 请输入一个正确的Email地址
            </div>
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Settings</a></li>
                <li role="presentation">
                    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
                    	Others
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">Action1</a>
                        </li>
                        <li>
                            <a href="#">Action2</a>
                        </li>
                        <li>
                            <a href="#">Action3</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav nav-pills">
                <li role="presentation"><a href="#">Home</a></li>
                <li role="presentation" class="active"><a href="#">Settings</a></li>
                <li role="presentation">
                    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
                    	Others
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="#">Action1</a>
                        </li>
                        <li>
                            <a href="#">Action2</a>
                        </li>
                        <li>
                            <a href="#">Action3</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav nav-tabs nav-stacked col-sm-3">
                <li role="presentation"><a href="#">Home</a></li>
                <li role="presentation" class="active"><a href="#">Settings</a></li>
                <li role="presentation"><a href="#">Others</a></li>
            </ul>
            <ul class="nav nav-pills nav-stacked col-sm-3">
                <li role="presentation"><a href="#">Home</a></li>
                <li role="presentation" class="active"><a href="#">Settings</a></li>
                <li role="presentation"><a href="#">Others</a></li>
            </ul>
            <div class="dropdown pull-right">
                <button class="btn btn-default dropdown-toggle" type="button" id="menu_file" data-toggle="dropdown" aria-expanded="true">
                    文件
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu_file">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">打开</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">保存</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">另存为</a></li>
                    <!-- <li role="presentation">
                        二级菜单
                        <ul class="dropdown-submenu" role="menu" aria-labelledby="menu_file">
                            <li role="presentation"><a href="#" role="menuitem">1</a></li>
                            <li role="presentation"><a href="#" role="menuitem">2</a></li>
                            <li role="presentation"><a href="#" role="menuitem">3</a></li>
                        </ul>
                    </li> -->
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">退出</a></li>
                </ul>
            </div>
            <hr class="clearfix">
            <div class="btn-group btn-group-lg" role="group">
                <buton class="btn btn-info" type="button">Left</buton>
                <buton class="btn btn-info" type="button">Middle</buton>
                <buton class="btn btn-info" type="button">Right</buton>
            </div>
            <div class="btn-group" role="group">
                <buton class="btn btn-default" type="button">Left</buton>
                <buton class="btn btn-default" type="button">Middle</buton>
                <buton class="btn btn-default" type="button">Right</buton>
                <div class="btn-group" role="group">
                    <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">
                        Hello
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a href="#" class="glyphicon glyphicon-download">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                </div>
            </div>
            <div class="btn-group-vertical" role="group">
                <buton class="btn btn-default" type="button">Left</buton>
                <buton class="btn btn-default" type="button">Middle</buton>
                <buton class="btn btn-default" type="button">Right</buton>
                <div class="btn-group" role="group">
                    <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">
                        Hello
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a href="#" class="glyphicon glyphicon-download">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                </div>
            </div>
            <div class="btn-group btn-group-justified" role="group">
                <div class="btn-group" role="group">
                    <button class="btn btn-danger" type="button">Home</button>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-danger" type="button">Products</button>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-danger" type="button">About</button>
                </div>
            </div>
            <!-- Split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-danger">Action</button>
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <div class="btn-group dropup">
                <button class="btn btn-default" type="button">About</button>
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
            <div class="input-group has-error">
                <input type="text" class="form-control" name="email" required placeholder="Input your username">
                <span class="input-group-addon">@dzhang.cn</span>
            </div>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入搜索的关键字">
                <span class="input-group-addon">搜索</span>
            </div>
            <div class="row">
                <div class="col-md-6 input-group">
                    <div class="input-group-btn">
                        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            宝贝
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">宝贝</a></li>
                            <li><a href="#">店铺</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入搜索的关键字">
                    <span class="input-group-addon">搜索</span>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js "></script>
        <script src="js/bootstrap.min.js "></script>
        <script src="js/jquery.serializejson.min.js "></script>
        <script src="js/jquery.json.js "></script>
        <script src="js/json2.js "></script>
    </body>

</html>
